/**
 * 单选开关
 * @returns {JSX.Element}
 * @constructor
 */

import { FaCheck } from "react-icons/fa";

export default function Checkbox2(){

  return (
    <div className="w-10/12 bg-indigo-300 flex items-center justify-between mt-20 mx-auto p-5 group has-[:checked]:ring-2 has-[:checked]:ring-blue-500 duration-300">
      <p className="font-mono text-xl group-has-[:checked]:underline underline-offset-4">
        Lorem ipsum dolor sit amet, consectetur adipisicing
      </p>
      <div className="size-10 border-2 border-purple-500 relative">
        <input type="checkbox"
               className="absolute appearance-none inset-0 z-50 opacity-0 cursor-pointer peer"/>
        <span className="absolute inset-0 bg-blue-500 flex items-center justify-center text-white text-2xl z-40 opacity-0 peer-checked:opacity-100 duration-300">
        <FaCheck/>
      </span>
      </div>
    </div>

  )
}
